<template>
  <div class="box">
    <div
      class="boxtext"
      id="name"
    >{{ props.username }}</div>
    <div
      class="boxtext"
      id="tokens"
    >{{ props.tokens }}</div>
    <div
      class="boxtext"
      id="role"
    >{{ props.role }}</div>
  </div>
</template>

<style scope>
.box {
  width: 100%;
  height: 50px;
  background-color: var(--left-black);
  display: flex;
  color: var(--vt-c-text-dark-2);
}
.boxtext {
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  overflow: hidden;
  font-size: large;
  font-weight: 500;
  
}
#name {
  width: 50%;
  height: 100%;
  /* background-color: bisque; */
}
#tokens {
  width: 25%;
  height: 100%;
  /* background-color: rebeccapurple; */
}
#role {
  width: 25%;
  height: 100%;
  /* background-color: cadetblue; */
}
</style>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  username: String,
  tokens: Number,
  role: String,
});
</script>